import { useMemo } from 'react';
import './index.less';
import { personalInfo } from '../../config';
import PhoneIcon from '../../assets/phone.png';
import EmailIcon from '../../assets/email.png';

const PersonalInfo = () => {
  const educationEls = useMemo(() => {
    const els: JSX.Element[] = [];
    personalInfo.educationInfos.forEach((item, index) => {
      els.push(
        <div key={index} className="personal-educations-item">
          <div className="type-and-time">{`${item.type} ${item.sTime}-${item.eTime}`}</div>
          <div className="divider"></div>
          <div className="school">{item.school}</div>
          <div className="major">{item.major}</div>
        </div>
      );
    });
    return els;
  }, []);

  const contactEls = useMemo(() => {
    const els: JSX.Element[] = [];
    [1, 2].forEach((item, index) => {
      let url = '';
      let text = '';
      if (index === 0) {
        url = PhoneIcon;
        text = personalInfo.phone;
      } else if (index === 1) {
        url = EmailIcon;
        text = personalInfo.email;
      }
      els.push(
        <div key={index} className="personal-contact-item">
          <img className="icon" src={url} />
          <span className="text">{text}</span>
        </div>
      );
    });
    return els;
  }, []);

  return (
    <div className="personal">
      <div className="personal-name">{personalInfo.name}</div>
      <div className="personal-educations">{educationEls}</div>
      <div className="personal-contact">{contactEls}</div>
      <img className="personal-photo" src={personalInfo.photo} />
    </div>
  );
};

export default PersonalInfo;
